<template>
	<view class="">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="我的活动" :autoBack="true">
			</u-navbar>
		</view>
		<view class="con-body" style="background-color: #F2F3F5;">

			<view style="background-color: #FFFFFF;margin-top: 1px;">
				<u-tabs :list="tabs" lineColor="#0B868E" :current="current" @change="changeTabs">
				</u-tabs>
			</view>
			<view style="padding: 20rpx;">
				<view class="a_list u-flex u-row-between" v-for="(item, index) in repairList" :key="index" @click="intoDetail(item.id)">
					<view class="a_left_con u-rela">
						<view class="a_title">
							<text>{{item.title}}</text>
						</view>
						<view class="a_sponsor">主办方：{{item.sponsor}}</view>
						<view class="a_address">活动地址：{{item.address}}</view>
						<view class="a_limit" v-if="item.limit == 0">参与人数：<text style="color:#0B868E;">{{item.join}}</text>/不限</view>
						<view class="a_limit" v-else>参与人数：<text style="color:#0B868E;">{{item.join}}</text>/不限</view>
						<view class="u-flex u-row-between" style="margin-top:20rpx;">
							<text class="a_time">{{item.time}}</text>
							<text class="a_free" v-if="item.free == 0">免费</text>
							<text class="a_free" v-else>￥{{item.price}}/人</text>
						</view>
						<view v-if="item.status == -1" class="a_status">
							<u-image width="120rpx" height="120rpx"
								src="https://resourse.cnlhjt.com/upload/20220825/23a08670c569a7ed00a0f6cc135c250b.png">
							</u-image>
						</view>
					</view>
					<image class="a_img" mode="aspectFill" :src="item.image"></image>
					
				</view>	
			</view>
			

				<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyActive,
		removeMyActive
	} from "@/service/communitService.js";
	export default {
		data() {
			return {
				current: 0,
				tabs: [{
						name: '全部'
					},
					{
						name: '待参加'
					},
					{
						name: '已完成'
					},
					{
						name: '已取消/已删除'
					}
				],
				gid: 0,
				repairList: [],
				showDel: false,
				showEmpty: false
			}
		},
		onLoad() {
			getMyActive().then(this.getMyActive);
		},
		methods: {
			getMyActive(e) {
				this.repairList = [];
				if (e.code == 200) {
					this.showEmpty = false;
					this.repairList = e.result;
				}else{
					this.showEmpty = true;
				}
			},
			removeActive() {

				this.showDel = false;
				removeMyActive({
					id: this.gid
				}).then(res => {
					if (res.code == 200) {

						getMyActive().then(this.getMyActive);
						uni.showToast({
							title: res.msg,
							icon: "success"
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						});
					}
				})

			},
			changeTabs(e) {
				this.current = e.index;
				let status;
				switch (this.current) {
					case 0:
						status = 99;
						break;
					case 1:
						status = 0;
						break;
					case 2:
						status = 1;
						break;
					case 3:
						status = -1;
						break;
				}
				getMyActive({
					status: status
				}).then(this.getMyActive);
			},
			intoDetail(id) {
				this.$u.route({
					url: 'pagesCommunity/mine/active-detail',
					params: {
						id: id
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.l_title {
		font-size: 32rpx;
		color: #999999;
		float: left;
	}

	.d_content {
		color: #666666;
		font-size: 32rpx;
	}

	.d_view {
		margin-top: 30rpx;
		text-align: right;
	}
	.a_list {
		padding:15rpx 10rpx;
		// border-bottom:1rpx solid #ddd;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		.a_left_con {
			width:58%;
			.a_title{
				margin-bottom:20rpx;
			}
			.a_title text{
				font-size: 22rpx; font-weight: 600; padding: 10rpx 22rpx; color: #fff; 
				font-family: Arial, Helvetica, sans-serif;
				background-image: url('https://resourse.cnlhjt.com/upload/20220825/605402e1cc43dd5e1964b57f5ea66b8c.png');
				background-size: 100% 100%;
			}
			.a_sponsor,.a_address,.a_limit{
				font-size: 22rpx; color: #666;
				margin-top:10rpx;
			}
			.a_time{
				font-size: 24rpx;color:#82848A;
			}
			.a_free{
				font-size: 30rpx;color: red;font-weight: bold;
			}
		}
		.a_img{
			width:40%;
			height:240rpx;
			border-radius: 20rpx;
		}
		.a_status{
			position: absolute;
			top:0rpx;
			right:20rpx;
		}
	}
</style>
